<template>
  <div class="MoveModel-container">
    <a-modal title="设置" cancelText="取消" okText="确定" :visible="true" :width="560" @cancel="handleCancel" @ok="handleOk">
      <div class="setWrapper">
        <ul class="setMoudle">
          <li
            class="setSwitch"
            v-for="(item,index) in settingData"
            :key="index"
            :style="{marginTop:'10px'}"
          >
            <span :style="{marginRight:'20px'}">{{ item.title }}：</span>
            <a-switch v-model="item.visible" @change="item.action" />
          </li>
        </ul>
        <div class="setMoudle">
          <p style="margin-bottom:8px;">背景色：</p>
          <div class="setColors">
            <div class="bgBlock" v-for="i in colorsBlock" :key="i.key">
              <span
                :class="`colorTab gradient ${state.currentColor === i.key ? 'selectTab' : ''}`"
                :key="i.key"
                @click="selectColor(i)"
                v-if="i.isGradient"
              ></span>
              <span
                :class="`colorTab ${state.currentColor === i.key ? 'selectTab' : ''}`"
                :key="i.key"
                :style="{'background': i.color}"
                @click="selectColor(i)"
                v-else
              ></span>
            </div>
          </div>
        </div>
      </div>
    </a-modal>
  </div>
</template>

<script>
import { colorsBlock } from "../menuConfig";
export default {
  props: ["settings"],
  data() {
    return {
      colorsBlock: colorsBlock,
      state: {},
      settingData: [],
    };
  },
  created() {
    let sessionSetParm = this.settings;
    this.state = {
      currentColor: sessionSetParm && sessionSetParm.currentColor,
      colors: sessionSetParm && sessionSetParm.colors,
      lightVisible: sessionSetParm && sessionSetParm.lightVisible,
      realityVisible: sessionSetParm && sessionSetParm.realityVisible,
      wareVisible: sessionSetParm && sessionSetParm.wareVisible,
    };

    this.settingData = [
      {
        title: "光照",
        visible: this.state.lightVisible,
        action: () => this.switchLight(),
      },
      {
        title: "真实",
        visible: this.state.realityVisible,
        action: () => this.switchReality(),
      },
      {
        title: "线框",
        visible: this.state.wareVisible,
        action: () => this.switchWare(),
      },
    ];
  },
  methods: {
    setState(options) {
      this.state = {
        ...this.state,
        ...options,
      };
    },
    selectColor(item) {
      let selectedColors = [];
      let colorKey = item && item.key;
      if (item) {
        if (item.isGradient) {
          selectedColors.push(
            { topColor: item.topColor },
            { bottomColor: item.bottomColor }
          );
        } else {
          selectedColors.push({ colorRGB: item.rgba });
        }
      }
      this.setState({
        currentColor: colorKey,
        colors: selectedColors,
      });
    },
    //开启光照
    switchLight() {
      this.setState({
        lightVisible: !this.state.lightVisible,
      });
    },

    //开启真实
    switchReality() {
      this.setState({
        realityVisible: !this.state.realityVisible,
      });
    },
    //开启线框
    switchWare() {
      this.setState({
        wareVisible: !this.state.wareVisible,
      });
    },
    handleOk() {
      this.$emit("modal:ok", this.state);
    },
    handleCancel() {
      this.$emit("modal:cancel");
    },
  },
};
</script>

<style lang="less">
.MoveModel-container {
  text-align: left;
  .moveModel {
    p {
      color: #333;
      font-size: 24px;
    }
  }
  .setColors {
    overflow: hidden;
    .colorTab {
      display: block;
      float: left;
      width: 32px;
      height: 32px;
      margin-right: 8px;
      border: 1px solid #e8e8e8;
      box-sizing: border-box;
      cursor: pointer;
    }
    .selectTab {
      border: 2px solid #3d81fa;
    }
    .gradient {
      background: -webkit-linear-gradient(
        rgb(177, 219, 254),
        rgb(255, 255, 255)
      );
      background: -o-linear-gradient(rgb(177, 219, 254), rgb(255, 255, 255));
      background: -moz-linear-gradient(rgb(177, 219, 254), rgb(255, 255, 255));
      background: linear-gradient(rgb(177, 219, 254), rgb(255, 255, 255));
    }
  }
  .ant-modal-wrap {
    top: 40%;
    transform: translateY(-40%);
  }
  .ant-modal {
    width: 320px !important;
  }
  .ant-modal-header {
    padding: 16px 18px;
  }
  .ant-modal-body {
    padding: 18px;
  }
  .ant-input {
    width: 200px;
  }
  .ant-modal-close-x {
    font-size: 14px;
  }
}
  .setColors {
    overflow: hidden;
    .colorTab {
      display: block;
      float: left;
      width: 32px;
      height: 32px;
      margin-right: 8px;
      border: 1px solid #e8e8e8;
      box-sizing: border-box;
      cursor: pointer;
    }
    .selectTab {
      border: 2px solid #3d81fa;
    }
    .gradient {
      background: -webkit-linear-gradient(
        rgb(177, 219, 254),
        rgb(255, 255, 255)
      );
      background: -o-linear-gradient(rgb(177, 219, 254), rgb(255, 255, 255));
      background: -moz-linear-gradient(rgb(177, 219, 254), rgb(255, 255, 255));
      background: linear-gradient(rgb(177, 219, 254), rgb(255, 255, 255));
    }
  }
</style>